import React, { Component } from 'react'
import { Route } from 'react-router-dom'
import { TabBar } from 'antd-mobile';
/*
    1.在pages文件夹中创建News/index.js组件
    2.在Home组件中，添加一个Route作为子路由（嵌套的路由）的出口
    3.设置嵌套的path，格式以父路由path开头（父组件展示，子组件才会展示）
*/
import News from '../News'
import List from '../List'
import Profile from '../profile'
import Index from '../index'
import CityList from '../CityList';
import './index.css'
import { Redirect } from 'react-router-dom/cjs/react-router-dom.min';


// tabber数据
const tabItems = [
    {
        title: '首页',
        icon: 'icon-shouye',
        selectIcon: 'icon-shouye1',
        path: '/home'
    },
    {
        title: '找房',
        icon: 'icon-sousuo1',
        selectIcon: 'icon-sousuo',
        path: '/home/list'
    },
    {
        title: '资讯',
        icon: 'icon-zixun',
        selectIcon: 'icon-zixun1',
        path: '/home/news'
    },
    {
        title: '我的',
        icon: 'icon-wodedangxuan',
        selectIcon: 'icon-wode',
        path: '/home/profile'
    },
]
export default class Home extends Component{
    state = {
        // 默认选中的tabber菜单项
        selectedTab: this.props.location.pathname,
        // 用于控制tabber的展示和隐藏，这个值应该是false，也就是不隐藏
        hidden: false,
        // 全屏
        fullScreen: false,
    };
    render() {
        return (
            <div className="home">
                {/* 渲染子路由 */}
                <Route exact path="/home" component={Index}></Route>
                <Route path="/home/list" component={List}></Route>
                <Route path="/home/news" component={News}></Route>
                <Route path="/home/profile" component={Profile}></Route>

                {/* TabBar */}
                    <TabBar
                    unselectedTintColor="#949494"
                    tintColor="#21b97a"
                    barTintColor="white"
                    hidden={this.state.hidden}
                    noRenderContent={true}
                    >
                        {this.renderTabBarItem()}
                    </TabBar>
            </div>
        )
    }

    
    renderTabBarItem() {
        return tabItems.map(item => {
            return <TabBar.Item
                        title={item.title}
                        key={item.title}
                        icon={
                            <i className={`iconfont ${item.icon}`}></i>
                        }
                        selectedIcon={
                            <i className={`iconfont ${item.selectIcon}`}></i>
                        }
                        selected={this.state.selectedTab === item.path}
                        onPress={() => {
                            this.setState({
                                selectedTab: item.path,
                            });
                            // 路由切换
                            this.props.history.push(item.path)
                        }}
                        data-seed="logId"
                    >
                    </TabBar.Item>
        })
    }
}